import waves from "@/directive/waves";
import { mapGetters } from 'vuex';
// component
import Pagination from "@/components/Pagination";
import CreateDictionary from '../components/create-dictionary/create-dictionary';
// service
import { alertMessage, showAlertMessage, alertHtmlWithCallback } from "@/utils/utils";
import { getDictionaryListApi, deleteSelectedDicApi } from "./dictionary-list.service";
import { getUserInfo } from "@/utils/auth";

export default {
  name: 'dictionary-list',
  components: { Pagination, CreateDictionary },
  directives: { waves },
  data() {
    return {
      userInfo: getUserInfo(),
      loading: true, // table loading
      // 筛选
      searchForm: {}, // 搜索内容
      confirmSearchForm: {}, // 确认提交搜索内容
      // table列表分页
      checkedRows: [], // 批量选中的数据
      selectDicId: '', // 选中的字典
      data: [], // 列表数据
      pageNum: 1, // 页码
      recordNum: 10, // 条数
      totalNum: 0, // 总数

      table: '',
      createOrEditDialogVisible: false // 创建/编辑字典弹窗
    }
  },
  computed: {
    ...mapGetters([
      'codesCheck'
    ])
  },
  activated() {
    this.table = this.$route.query.table;
    this.getDataList();
  },
  methods: {
    // 获取列表
    getDataList() {
      this.loading = false;
      const params = {
        tableName: this.table.tableName,
        itemName: this.searchForm.itemName,
        pageNum: this.pageNum,
        recordNum: this.recordNum
      }
      getDictionaryListApi(params).then(res => {
        this.totalNum = Number(res.dataCount);
        this.data = res.data;
        this.loading = false;
      });
    },

    // 重置搜索
    onReset() {
      this.pageNum = 1;
      this.confirmSearchForm = {
        queryStr: ''
      }
      this.searchForm = JSON.parse(JSON.stringify(this.confirmSearchForm))
      this.getDataList();
    },

    // 打开新建/编辑窗体
    openCreateOrEditDialog(row) {
      this.selectDicId = row ? row.objectId : ''
      this.createOrEditDialogVisible = true;
    },

    // 关闭新建/编辑弹窗
    closeCreateOrEditDialog() {
      this.createOrEditDialogVisible = false;
    },

    // 刷新数据
    reload() {
      this.pageNum = 1
      this.getDataList();
    },

    // 处理checkbox选中行数据
    handleSelectionChange(val) {
      this.checkedRows = val;
    },

    // 删除单/多条选中数据
    deleteSelectedData(id, name) {
      // 如果是单条删除
      let ids = id ? [id] : []
      if (ids.length === 0 && this.checkedRows.length === 0) {
        alertMessage('请至少选择一条数据', 'warning');
      } else {
        const message = {
          name: ids.length === 0 ? this.checkedRows.map(v => v.itemName).join('&nbsp;&nbsp;') : name
        }
        const alertMsg = showAlertMessage(`字典标签为:`, message)
        alertHtmlWithCallback(alertMsg, `是否确认删除已选中的${ids.length === 0 ? this.checkedRows.length : 1}条数据`).then(() => {
          if (ids.length === 0) {
            this.checkedRows.forEach(item => {
              ids.push(item.objectId)
            });
          }
          deleteSelectedDicApi(ids).then((res) => {
            alertMessage(res.message);
            this.onReset();
          }).catch(() => { }); // 关闭confirm框的回调，不处理的话会报一个js error
        }).catch(() => { }); // 关闭confirm框的回调，不处理的话会报一个js error
      }
    }
  }
}
